<template>
  <div class="L-orgRef" v-loading="isLoading">
    <div class="L-top-bar">
      <el-input v-model="keyword" style="max-width: 600px" placeholder="请输入关键字">
        <template #append ><span @click="handleSearch" style="cursor: pointer;">搜索</span> </template>
      </el-input>
    </div>

    <div  v-if="refData?.orgData && refData?.orgData?.length>0" class="L-orgTree">
      <RefOrgTree :listMode="refData.listMode" :selecteddata="refData.selecteddata" :mode="refData.mode"
        :bo="refData.bo" :orgData="refData.orgData" :handleExpand="handleExpand" :handleChecked="handleChecked"
        :handleClick="handleClick">
      </RefOrgTree>
    </div>

    <el-empty v-else description="没有数据" />




  </div>
  <!-- <van-tabbar safe-area-inset-bottom v-if="refData.mode === 'multi'">
    <div class="L-orgRef-tabbar">
      <van-button color="#1989fb" type="primary" style="width:90%" @click="handleConfirm">确定</van-button>
    </div>
  </van-tabbar> -->
</template>

<script lang="ts" setup>
import RefOrgTree from "./RefOrgTree.vue";
import { ref, reactive, watch, onMounted, inject } from "vue";

import { apiConfigurable, } from "@/request/api";


const refData = reactive({
  bo: "employee",
  orgData: [],
  mode: "normal",
  keyword: "",
  sval: "",
  list: [],
  loading: false,
  page: 0,
  rebackobject: { reBackflag: false },
  fieldref: "",
  selecteddata: [],
  listMode: "tree",
});

const isLoading = ref(false); //是否加载中
const keyword = ref("");

const props = defineProps({
  refParams: {
    type: Object,
    default: {},
  },
  handleRefClick: {
    type: Function,
    default: () => { },
  },
  handleRefCancle: {
    type: Function,
    default: () => { },
  },
  refMode: {
    type: String,
    default: "normal",
  },
  refObject: {
    type: String,
    default: "",
  },
});




onMounted(() => {
  getRefData();
});

function handleExpand(item, isShow) {

  if (!isShow) {
    item.extra.show = isShow
    return
  }
  const loadParams = props.refParams;
  let data = {
    ref_object: loadParams.object,
    ref_toobject: loadParams.toobject,
    ref_tofieldas: loadParams.field,
    ref_inview: "",
    view_page: refData.page,
    view_id: loadParams.id,
    ref_classname: "",
    ref_params: "",

    ref_conditionval: refData.keyword,
    ref_depid: item.id, // 部门id，默认所有
    conf_searchall: false
  };

  data.ref_inview = data.ref_inview.replace(':in:', ':in:' + this.sval)
  const url = `/capi/ref.listnew.do`;
  isLoading.value = true;
  apiConfigurable(url, data, "post").then(res => {
    if (res.status === 200) {
      item.extra.show = isShow
      item.children = res.data.jsondata.outdata
    }
  }).finally(() => {
    isLoading.value = false;
  })
}


function handleChecked(item, isChecked) {
  if (refData.mode === "normal") {
    const returnObj = {
      title: item.extra.sname,
      id: item.id,
    };
    item.extra.checked = isChecked;
    props.handleRefClick(returnObj);
  }
}

function handleClick(item) {

  if (refData.mode === "normal") {

    // 如果当前对象是人员,点击的对象是部门则不做回显
    if (props.refParams.object === 'employee' && item.type === 'dep') {
      return
    }
    const returnObj = {
      title: item.extra.sname,
      id: item.id,
    };

    props.handleRefClick(returnObj);
  }
}

function handleConfirm() {
  let id = "";
  let title = "";

  for (let i = 0; i < refData.selecteddata.length; i++) {
    const item = refData.selecteddata[i];
    id += `${item.id};`;
    title += `${item?.extra.sname};`;
  }
  const returnObj = {
    title,
    id,
  };
  props.handleRefClick(returnObj);
}
function getRefData() {
  const { refParams } = props

  let data = {
    ref_object: refParams.object,
    ref_toobject: refParams.toobject,
    ref_tofieldas: refParams.field,
    ref_inview: refParams.inview || "",
    view_id: refParams.sRefKey,
    ref_classname: refParams.classname,
    ref_params: refParams.params,
    ref_conditionval: keyword.value,
  };
  const url = `/capi/ref.listnew.do`;
  isLoading.value = true;
  apiConfigurable(url, data, "post").then(res => {
    if (res.status === 200) {

      refData.orgData = res?.data?.jsondata?.outdata
    }
  }).finally(() => {
    isLoading.value = false;
  })

}

function handleSearch() {
  if (refData.keyword === "") {
    refData.listMode = "tree";
  } else {
    refData.listMode = "list";
  }
  getRefData();
}


</script>

<style scoped>
.L-orgRef {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: scroll;

}

.L-orgTree {
  padding: 5px 8px;
  box-sizing: border-box;
  margin-bottom: 40px;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: scroll;
  /* margin-top: 50px; */
}

.L-top-bar {
  /* position: fixed; */
  width: 100%;
  height: 55px;
  border-bottom: 1px solid #f0f0f0;
  flex-grow: 0;
  flex-shrink: 0;


  /* top: 0;
  left: 0; */
}
</style>
